<template>
  <div>
    <div>
      <Header />
    </div>
    <div class="mlstyl1">
      <div class="mlstyl2">
        <span :style="r" @click="move2">正在热映</span>
        <span style="font-size: x-large">/</span>
        <span :style="nr" @click="move1">即将上映</span>
      </div>
      <div class="mlstyl3">
        <el-input
          class="mlinputs"
          v-model="search"
          id="inp"
          placeholder="请输入关键字"
          clearable
          ><i class="el-input__icon el-icon-search"></i
        ></el-input>
      </div>
      <div class="mlstyl4">
        <el-button type="warning" style="display: flex; float: right" @click="look">查询</el-button>
      </div>
    </div>
    <movieCardVue ref="movieList" v-if="cnt >= 1" />
    <div v-else>
      <div class="mlstyl5">
        <el-empty
          class="mlstyl6"
          description="未找到相关电影，正在努力挖掘中......"
        />
      </div>
      <div
        class="mlstyl7"
      ></div>
    </div>
    <rightColVue />
  </div>
</template>
<script setup>
import Header from '@/components/Client/GlobalCom/Header'
import { onMounted, ref } from 'vue'
import router from '@/router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import rightColVue from '@/components/Client/movieListCom/rightCol'
import movieCardVue from '@/components/Client/movieListCom/movieCard'
import '@/assets/scss/movieList.scss'
const cnt = ref(1)
const movieList = ref()
const states = ref('正在热映')
const r = ref('font-size: x-large;color: red')
const nr = ref('font-size: x-large;')
onMounted(() => {
  if (document.documentElement.clientWidth < document.documentElement.clientHeight) {
    router.push('movieListMobile')
  }
})
const tableClr = () => {
  movieList.value.tableData = []
  movieList.value.name = []
  movieList.value.star = []
  movieList.value.lab = []
  movieList.value.lan = []
  movieList.value.dir = []
  movieList.value.mrole = []
  movieList.value.mtype = []
  movieList.value.mtime = []
  movieList.value.vals2 = []
  movieList.value.tableData = []
}
const search = ref('')
function look() {
  axios
    .get('/api/movie/getMovieByKeyAndMstate/' + search.value + '/' + states.value)
    .then((res) => {
      if (res.data !== null) {
        cnt.value = res.data.length
        tableClr()
        movieList.value.tableAll = res.data
        movieList.value.total = movieList.value.tableAll.length
        movieList.value.tableData = []
        const len = movieList.value.tableAll.length > 4 ? 4 : movieList.value.tableAll.length
        for (let i = 0; i < len; i = i + 1) {
          movieList.value.tableData.push(movieList.value.tableAll[i])
        }
        for (let i = 0; i < len; i = i + 1) {
          const sp = require('../assets/moviesPic/' + movieList.value.tableData[i].pic)
          movieList.value.vals2.push(sp)
          movieList.value.name.push(movieList.value.tableData[i].mname)
          movieList.value.star.push(movieList.value.tableData[i].rate)
          movieList.value.lab.push(movieList.value.tableData[i].nickname)
          movieList.value.lan.push(movieList.value.tableData[i].mlanguage)
          movieList.value.dir.push(movieList.value.tableData[i].director)
          movieList.value.mrole.push(movieList.value.tableData[i].mrole)
          movieList.value.mtype.push(movieList.value.tableData[i].mtype)
          movieList.value.mtime.push(movieList.value.tableData[i].duration)
        }
      } else {
        ElMessage({
          showClose: true,
          message: '获取失败！',
          type: 'error'
        })
      }
    })
}
function move1() {
  states.value = '即将上映'
  r.value = 'font-size: x-large;'
  nr.value = 'font-size: x-large;color: red'
  axios.get('/api/movie/getMovieByMstate/即将上映').then((res) => {
    cnt.value = res.data.length
    if (res.data !== null) {
      movieList.value.tableAll = res.data
      tableClr()
      const len = movieList.value.tableAll.length > 4 ? 4 : movieList.value.tableAll.length
      for (let i = 0; i < len; i = i + 1) {
        movieList.value.tableData.push(movieList.value.tableAll[i])
      }
      for (let i = 0; i < len; i = i + 1) {
        const sp = require('@/assets/moviesPic/' + movieList.value.tableData[i].pic)
        movieList.value.vals2.push(sp)
        movieList.value.name.push(movieList.value.tableData[i].mname)
        movieList.value.star.push(movieList.value.tableData[i].rate)
        movieList.value.lab.push(movieList.value.tableData[i].nickname)
        movieList.value.lan.push(movieList.value.tableData[i].mlanguage)
        movieList.value.dir.push(movieList.value.tableData[i].director)
        movieList.value.mrole.push(movieList.value.tableData[i].mrole)
        movieList.value.mtype.push(movieList.value.tableData[i].mtype)
        movieList.value.mtime.push(movieList.value.tableData[i].duration)
      }
      movieList.value.total = movieList.value.tableAll.length
    } else {
      ElMessage({
        showClose: true,
        message: '获取失败！',
        type: 'error'
      })
    }
  })
}
function move2() {
  states.value = '正在热映'
  nr.value = 'font-size: x-large;'
  r.value = 'font-size: x-large;color: red'
  axios.get('/api/movie/getMovieByMstate/正在热映').then((res) => {
    if (res.data !== null) {
      cnt.value = res.data.length
      tableClr()
      movieList.value.tableAll = res.data
      movieList.value.total = movieList.value.tableAll.length
      const len = movieList.value.tableAll.length > 4 ? 4 : movieList.value.tableAll.length
      for (let i = 0; i < len; i = i + 1) {
        movieList.value.tableData.push(movieList.value.tableAll[i])
      }
      for (let i = 0; i < len; i = i + 1) {
        const sp = require('../assets/moviesPic/' + movieList.value.tableData[i].pic)
        movieList.value.vals2.push(sp)
        movieList.value.name.push(movieList.value.tableData[i].mname)
        movieList.value.star.push(movieList.value.tableData[i].rate)
        movieList.value.lab.push(movieList.value.tableData[i].nickname)
        movieList.value.lan.push(movieList.value.tableData[i].mlanguage)
        movieList.value.dir.push(movieList.value.tableData[i].director)
        movieList.value.mrole.push(movieList.value.tableData[i].mrole)
        movieList.value.mtype.push(movieList.value.tableData[i].mtype)
        movieList.value.mtime.push(movieList.value.tableData[i].duration)
      }
    } else {
      ElMessage({
        showClose: true,
        message: '请求失败！',
        type: 'error'
      })
    }
  })
}
</script>
